<template>
  <div class="role-management-container">
    <!-- 顶部查询与操作区 -->
    <el-row :gutter="24" class="page-header mb-6">
      <!-- 左侧查询表单 -->
      <el-col :span="16">
        <el-card shadow="hover" class="query-card">
          <el-form 
            :inline="true" 
            :model="queryForm" 
            class="demo-form-inline"
            size="medium"
          >
            <el-form-item label="角色名称" label-width="90px" class="query-item">
              <el-input 
                v-model="queryForm.rolename" 
                placeholder="请输入角色名称"
                clearable
                size="medium"
                class="input-w-200"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button 
                type="primary" 
                @click="getTableData"
                size="medium"
                icon="el-icon-search"
              >
                查询
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>

      <!-- 右侧操作按钮组 -->
      <el-col :span="8">
        <div class="action-buttons flex justify-end items-center">
          <el-button-group class="mr-3">
            <el-button 
              type="primary"  
              @click="openInfo"
              size="medium"
              icon="el-icon-plus"
              class="btn-add"
            >
              新增
            </el-button>
          </el-button-group>
          <el-button-group class="mr-3">
            <el-button 
              type="primary"  
              @click="openEdit"
              size="medium"
              icon="el-icon-edit"
              class="btn-edit"
            >
              编辑
            </el-button>
          </el-button-group>
          <el-button-group>
            <el-button 
              type="danger"  
              @click="openDel"
              size="medium"
              icon="el-icon-delete"
              class="btn-delete"
            >
              删除
            </el-button>
          </el-button-group>
        </div>
      </el-col>
    </el-row>

    <!-- 表格与分页区 -->
    <el-row>
      <el-col :span="24">
        <el-card shadow="hover" class="table-card">
          <!-- 角色表格 -->
          <el-table
            ref="multipleTable"
            :data="roleList"
            border
            stripe
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            size="medium"
            :cell-style="{ 'text-align': 'center' }"
            :header-cell-style="{ 
              'text-align': 'center', 
              'background-color': '#f5f7fa', 
              'font-weight': 'bold' 
            }"
          >
            <el-table-column
              type="selection"
              width="60"
              align="center"
            ></el-table-column>
            <el-table-column
              label="角色名称"
              align="center"
              width="160"
            >
              <template slot-scope="scope">
                {{ scope.row?.rolename || '-' }} <!-- 安全取值，避免undefined报错 -->
              </template>
            </el-table-column>
            <el-table-column
              label="角色详情"
              align="center"
              min-width="200"
            >
              <template slot-scope="scope">
                {{ scope.row?.roleinfo || '-' }} <!-- 空值显示占位符 -->
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页控件 -->
          <div class="pagination-container mt-6 flex justify-between items-center">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="queryForm.limit"
              :current-page="queryForm.page" 
              layout="prev, pager, next, total, sizes, jumper"
              :total="total"
              size="small"
              class="pagination"
            ></el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 采购详情子组件（添加样式优化） -->
    <role-show 
      :isShow="visible" 
      @closeDialog="setIsShow" 
      @supSave="tableLoad" 
      :proInfo="roleForm" 
      :nowRoleid="nowRoleid"
      class="role-modal"
    ></role-show>
  </div>
</template>

<script>
// JavaScript 代码保持不变，此处省略
import roleShow from '@/components/roleShow.vue';
export default {
  name:"addProType",
  components:{
    roleShow
  },
  data(){
    return{
      roleList:[],
      queryForm:{
          roleid:0,
          rolename:'',
          page:1,
          limit:10
      },
      total: 0,  
      visible : false,
      theStatus: 1,  
      roleForm:{},
      managerShow:false,
      checkedptList:[]
    }
  },
  methods:{
    handleSelectionChange(val){
      this.checkedptList = val
    },
    getTableData(resetPage = true){
      if(resetPage){
        this.queryForm.page = 1
      }
        this.$http.post("/getRoleCount",this.queryForm).then(res =>{
        this.total = res.data
      })
        this.$http.post("/getRoleList",this.queryForm).then(res =>{
        this.roleList = res.data
      })
    },
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.queryForm.limit = val
        this.getTableData()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.queryForm.page = val
        this.getTableData(false)
      },
      openInfo(){
        this.visible = true
      },
      openEdit(){
          if(this.checkedptList.length == 0){
          this.$message.warning("请选择要修改的角色")
          return
        }
        if(this.checkedptList.length > 1){
          this.$message.warning("只能选择一个角色")
          return
        }
        let roleid = this.checkedptList[0].roleid
                if(roleid == 1){
          this.$message.error("无法修改管理员信息")
          return
        }
        this.$http.get('/getRoleOne/' + roleid).then(res =>{
          this.roleForm = res.data
          this.visible = true
        })
      },
      setIsShow(){
        this.mod = 0
        this.visible = false
      },
      tableLoad(msg){
        if(msg === 'success'){
          this.visible = false
          this.$message.success("操作成功")
          this.getTableData()
        }
      },
      openDel(){
        if(this.checkedptList.length == 0){
          this.$message.warning("请选择要删除的员工信息")
          return
        }
        this.$confirm('确定要删除选中的数据吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let roleids = []
          
          for(let role of this.checkedptList){
          if(role.roleid == 1){
          this.$message.error("无法删除管理员")
          return
          }
            roleids.push(role.roleid)
          }
          this.$http.post('/delRoles',roleids,{ headers: { 'Content-Type': 'application/json' } }).then(res =>{
            if(res.data === 'success'){
              this.$message.success('删除成功')
              this.getTableData()
            } else{
              this.$message.error('删除失败')
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
  },
  created(){
    this.getTableData()
  }
}
</script>

<style scoped>
/* 容器基础样式 */
.role-management-container {
  padding: 20px;
  background-color: #f9fafb;
  min-height: calc(100vh - 60px);
}

/* 顶部区域样式 */
.page-header {
  margin-bottom: 24px;
}

/* 查询卡片样式 */
.query-card {
  border-radius: 8px;
  border: 1px solid #ebeef5;
  padding: 16px;
}

.query-item {
  margin-right: 16px;
}

.input-w-200 {
  width: 240px;
}

/* 操作按钮组样式 */
.action-buttons {
  height: 100%;
}

.btn-add {
  background-color: #409eff;
  border-color: #409eff;
}

.btn-edit {
  background-color: #13c2c2;
  border-color: #13c2c2;
}

.btn-delete {
  background-color: #f56c6c;
  border-color: #f56c6c;
}

/* 表格卡片样式 */
.table-card {
  border-radius: 8px;
  border: 1px solid #ebeef5;
  overflow: hidden;
}

/* 分页容器样式 */
.pagination-container {
  padding: 0 16px 16px;
}

/* 适配小屏幕 */
@media (max-width: 1200px) {
  .el-row.page-header {
    flex-direction: column;
  }
  
  .el-col.page-header > div {
    width: 100%;
    margin-bottom: 16px;
  }
  
  .action-buttons {
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .role-management-container {
    padding: 12px;
  }
  
  .input-w-200 {
    width: 180px;
  }
  
  .el-form-item.query-item {
    margin-right: 8px;
    margin-bottom: 8px;
  }
}
</style>